<script setup lang="ts">
import { reactive, ref, watch, computed } from 'vue'

const ideoList = reactive(
    [
        {
            id: 1,
            title: 'Vue源码分析与设计',
            people: '133',
            img: 'https://cdn-media-1.freecodecamp.org/images/0*xkJgg-6HskYrQ3N7.jpeg',
        },
        {
            id: 2,
            title: '数据预处理与分析',
            people: '133',
            img: 'course/kaggle.svg',
        }, {
            id: 3,
            title: 'Java算法设计',
            people: '135',
            img: 'https://developeronfire.com/assets/images/UncleBobMartin.jpg',
        }, {
            id: 4,
            title: '“智能杯”网页设计与开发大赛',
            people: '33',
            img: 'https://www.sapeople.com/wp-content/uploads/2015/09/elon-th.jpg',
        },
        {
            id: 5,
            title: '数据预处理与分析',
            people: '133',
            img: 'course/kaggle.svg',
        }, {
            id: 6,
            title: '软件测试',
            people: '135',
            img: 'https://developeronfire.com/assets/images/UncleBobMartin.jpg',
        }
    ]
)

</script>
    
<template>
    <div class="container">
        <div class="itemList">
            <div class="item animate__animated animate__fadeInUp" v-for="item in ideoList" :key="item.id">
                <img :src="item.img" alt="">
                <div class="center">
                    <div>{{ item.title }}</div>
                    <div>{{ item.people }}人已参与</div>
                </div>
                <div>时间:2022.11.20-2022.12.15</div>
                <div class="btn">
                    <button class="button">我要参与</button>
                </div>
            </div>
        </div>
    </div>
</template>
    
<style scoped lang="scss">
.container {
    @include flex;
    .itemList {
        .item {
            position: relative;
            margin: 10px 0;
            width: 60vw;
            height: 75px;
            border-radius: 5px;
            box-shadow: $box-shadow;
            @include flex(flex-start);

            img {
                margin: 0 10px;
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }

            .center {
                margin: 0 20px;
                div:nth-child(1) {
                    font-size: 20px;
                }
            }

            .btn {
                position: absolute;
                right: 20px;
                cursor: pointer;
            }
        }
    }
}
</style>